const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

//提取css文件插件（推荐使用 MiniCssExtractPlugin）
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const glob = require("glob");

// 去除多余css
// 	1、purifycss-webpack
//  2、purify-css
//  3、glob（需要依赖这个模块，用来扫描路径，不过不用安装）
//  安装：npm i purifycss-webpack purify-css -D
const PurifyCSSPlugin = require("purifycss-webpack");

//压缩css 插件
var OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
  // entry: "./src/index.js",
  entry: {
    a: "./src/a.js",
    b: "./src/b.js"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js"
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/template.html",
      title: "SplitChunks",
      filename: "index.html",
      //注意这里最好保持默认的，如果设置了 head 把script标签放入头部，
      //在使用react会导致js找不到dom节点
      inject: true,
      hash: true
      // minify: {
      //   collapseWhitespace: true,
      //   removeAttributeQuotes: true,
      //   removeComments: true
      // }
    }),
    new webpack.HotModuleReplacementPlugin(),

    // 在webpack新的版本中已经不推荐使用，如果要使用
    // 请安装最新的next 版本 如：npm i extract-text-webpack-plugin@next
    // new ExtractTextPlugin({
    //   filename: "css/index.css"
    // }),

    //注意：需要4.3以上的版本才能用
    //新版本推荐使用 MiniCssExtractPlugin 提取css文件
    // 对比插件 extract-text-webpack-plugin优点点:
    // 1.异步加载 2.不重复编译，性能更好 3.更容易使用 4.只针对CSS
    new MiniCssExtractPlugin({
      filename: "css/index.css"
    }),
    new PurifyCSSPlugin({
      paths: glob.sync(path.join(__dirname, "src/*.html"))
    })

    // 加载第三方库
    // new webpack.ProvidePlugin({
    //   jQuery: "jquery",
    //   _: "underscore"
    // })
    // new OptimizeCssAssetsPlugin()
  ],

  devServer: {
    host: "localhost",
    port: 1574,
    open: true,
    hot: true
  },

  module: {
    rules: [
      {
        test: /\.css$/,
        // use: ["style-loader", "css-loader"]
        // use: ExtractTextPlugin.extract({
        //   use: "css-loader",
        //   fallback: "style-loader"
        // })
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../"
            }
          },
          "css-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../"
            }
          },
          "css-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        // use: ["file-loader"]
        // use: [
        //   {
        //     loader: "file-loader",
        //     options: {
        //       outputPath: "images"
        //     }
        //   }
        // ]

        // file-loader：直接引用的文件
        // url-loader: 把文件进行base64编码然后放到文件中
        // use: ["url-loader"]
        // use: [
        //   {
        //     loader: "url-loader",
        //     options: {
        //       limit: 1024 * 50, //如果图片小于50kb就会被转成base64
        //       outputPath: "images"
        //     }
        //   }
        // ],

        //另外一种写法
        use: "url-loader?limit=50000&outputPath=images"
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
            plugins: ["@babel/plugin-transform-runtime"]
          }
        }
      }
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        js: {
          name: "vender",
          test: /\.js$/,
          chunks: "initial"
        }
      }
    }
  }
};
